<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
</head>
<body>
<blockquote class="layui-elem-quote">添加商品</blockquote>

<!--表单-->
<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">父分类</label>
        <div class="layui-input-inline">
            <select name="parentId" lay-filter="parentId"></select>
        </div>
        <label class="layui-form-label">子分类</label>
        <div class="layui-input-inline">
            <select name="categoryId"></select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品名</label>
        <div class="layui-input-inline">
            <input class="layui-input" type="text" name="name" required placeholder="请输入商品名">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-inline">
            <textarea class="layui-textarea" type="text" name="dscp" required placeholder="请输入描述"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">售价</label>
        <div class="layui-input-inline">
            <input class="layui-input" type="number" name="price" required placeholder="请输入商品的出售价格" step="0.01">
        </div>
        <label class="layui-form-label">标价</label>
        <div class="layui-input-inline">
            <input class="layui-input" type="number" name="markPrice" required placeholder="请输入商品的标识价格" step="0.01">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">颜色</label>
        <div class="layui-input-inline">
            <input class="layui-input" type="text" name="color" required placeholder="请输入颜色">
        </div>
        <label class="layui-form-label">版本</label>
        <div class="layui-input-inline">
            <input class="layui-input" type="text" name="version" required placeholder="请输入版本">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">数目</label>
        <div class="layui-input-inline">
            <input class="layui-input" type="number" name="count" required placeholder="请输入数目">
        </div>
        <label class="layui-form-label">主页推荐</label>
        <div class="layui-input-inline">
            <input type="radio" name="recom" value="0" title="不推荐" checked>
            <input type="radio" name="recom" value="1" title="推荐">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">内容</label>
        <div class="layui-input-inline">
            <textarea class="layui-textarea" type="text" name="content" required placeholder="内容"></textarea>
        </div>
    </div>
    <div class="layui-form">
        <label class="layui-form-label">图片</label>
        <div class="layui-input-block">
            <!--图片上传的控件-->
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test2">多图片上传</button>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览图：
                    <div class="layui-upload-list" id="demo2" name="pics"></div>
                </blockquote>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="hidden" name="pic">
            <input type="hidden" name="id">
            <button type="submit" lay-submit lay-filter="goods-add" class="layui-btn">提交</button>
        </div>
    </div>
</form>
<script type="text/html" id="goods-pics">
    {{# layui.each(goods.pics,function(index,item){ }}
    <img src="/upload/{{item.url}}" style="height: 50px;">
    {{# }); }}
</script>
<script>
    layui.use(['form','upload','element'],function () {
        var form = layui.form,
            upload = layui.upload,
            element = layui.element,
            $=layui.$;
        var goods = JSON.parse(sessionStorage.getItem('goods-edit'));
        $('input[name="name"]').val(goods.name);
        $('textarea[name="dscp"]').val(goods.dscp);
        $('input[name="price"]').val(goods.price);
        $('input[name="markPrice"]').val(goods.markPrice);
        $('input[name="color"]').val(goods.color);
        $('input[name="version"]').val(goods.version);
        $('input[name="count"]').val(goods.count);
        $('textarea[name="content"]').val(goods.content);
        $('input[name="recom"][value="'+goods.recom+'"]').attr('checked','checked')
        var html = ''
        $.each(goods.pics,function (index,item) {
            html += '<img src="/upload/'+item.url+'" data-name="'+item.url+'"style="height: 50px;">'
            $('div[name="pics"]').html(html)
        })
        $('input[name="id"]').val(goods.id)
        //渲染表单
        form.render();

        function getFather() {
            let id;
            $.ajax({
                url: '/api/category',
                data: {},
                type: 'get',
                async: false,
                dataType: 'json',
                success: function (result) {
                    //遍历
                    $.each(result.data, function (index,item) {
                        if(goods.categoryId === item.id){
                            id=item.parentId;
                        }
                    })
                },
                error: function () {
                    layer.msg('请求失败');
                }
            })
            return id;
        }

        let id=getFather();
        console.log("执行后",id)

        //使用 ajax 获取父分类的列表
        var getParentCategory = function () {
            // id=getFather()
            $.ajax({
                url: '/api/category',
                data: {parentId: 0},
                type: 'get',
                dataType: 'json',
                success: function (result) {
                    var html='<option value="">请选择父分类</option>'
                    //遍历
                    $.each(result.data, function (index,item) {

                        if(id === item.id){
                            html+='<option value="'+item.id+'" selected>'+item.name+'</option>'
                        }else{
                            html+='<option value="'+item.id+'">'+item.name+'</option>'
                        }


                    })

                    $('select[name="parentId"]').html(html);
                    form.render();
                },
                error: function () {
                    layer.msg('请求失败');
                }
            })
        }
        var getSonCategory= function () {
            // var id = getFather()
            console.log(id)
            $.ajax({
                url: '/api/category',
                data: {parentId: id},
                type: 'get',
                dataType: 'json',
                success: function (result) {
                    var html='<option value="">请选择子分类</option>'
                    //遍历
                    $.each(result.data, function (index,item) {
                        if(goods.categoryId == item.id){
                            html+='<option value="'+item.id+'" selected>'+item.name+'</option>'
                        }else {
                            html+='<option value="'+item.id+'">'+item.name+'</option>'
                        }

                    })

                    $('select[name="categoryId"]').html(html);
                    form.render();
                },
                error: function () {
                    layer.msg('请求失败');
                }
            })
        }
        getParentCategory();
        getSonCategory();

        //动作，父分类选择的动作
        form.on('select(parentId)',function (data) {
            var parentId = data.value;
            //二级联动
            if(parentId){
                $.ajax({
                    url: '/api/category',
                    data: {parentId: parentId},
                    type: 'get',
                    dataType: 'json',
                    success: function (result) {
                        var html='<option value="">请选择子分类</option>'
                        //遍历
                        $.each(result.data, function (index,item) {
                            if(goods.categoryId == item.id){
                                html+='<option value="'+item.id+'" selected>'+item.name+'</option>'
                            }else {
                                html+='<option value="'+item.id+'">'+item.name+'</option>'
                            }

                        })
                        $('select[name="categoryId"]').html(html);
                        form.render();
                    },
                    error: function () {
                        layer.msg('请求失败');
                    }
                })
            }else{
                $('select[name="categoryId"]').html('');
                form.render();
            }
        });





        //常规使用 - 多图片上传
        upload.render({
            elem: '#test2'
            ,url: '/api/upload' //此处配置你自己的上传接口即可
            ,multiple: true
            ,before: function(obj){

            }
            ,done: function(res){
                //上传完毕
                //读取服务器中的图片
                $('#demo2').append('\
                <img style="width: 92px;height: 92px;" src="/upload/'+res.data+'"\
                data-name="'+res.data+'">\
                ');

            }
        });

        //图片的删除
        $('#demo2').on('click','img',function () {
            $(this).remove()
        });
        //表单的提交
        form.on('submit(goods-add)',function (data) {
            //图片的参数
            var pics = [];
            $('#demo2 img').each(function () {
                var url = $(this).attr('data-name');
                pics.push({url: url});
            })
            data.field.pics = pics;

            //ajax将表单的数据提交到服务器
            $.ajax({
                url: '/api/goods',
                data: JSON.stringify(data.field),
                contentType: 'application/json; charset=utf-8',
                type: 'put',
                dataType: 'json',
                success: function (result) {
                    if (result.code == 0){
                        layer.msg("修改成功")
                        openUrl('goods/index.html')
                    }else{
                        layer.msg(result.msg);
                    }
                },
                error: function () {
                    layer.msg("提交失败")
                }
            })
            //阻止表单的自动提交
            return false;
        });
    })
</script>
</body>
</html>